<template>
  <div class="hello">
	  <div class="container">
		  <div :class="isbool?'login-box slide-up':'login-box'">
			  <h2 id="login" class="login-title">
				  登录
			  </h2>
			  <div class="input-box">
				  <input type="text" placeholder="用户名" v-model="userName"/>
				  <input type="password" placeholder="密码" v-model="password">
			  </div>
			  <button @click="loginshop()">登录</button>
		  </div>
		  
		  <div :class="isbool?'register-box slide-up':'register-box'">
			  <div class="center">
				  <h2 id="register" class="register-title" @click="changebool()">
				  		{{Text1}}
				  </h2>
				  <div class="input-box">
				  		<input type="text" placeholder="手机号" v-model="phone"/>
				  		<input id="yzm-box" type="password" placeholder="验证码" v-model="yzm">
						<button id="yzm-btn" @click="yzm()">发</button>
				  </div>
				  <button @click="register()">注册</button>
			  </div>

		  </div>
	  </div>
  </div>
</template>

<script>
import { phoneReginAPI,sendAPI } from "../request/api.js"

export default {
  name: 'loginpage',
  data(){
	  return{
		  isbool:true,
		  Text1:"注册",
		  userName:'',
		  password:'',
		  phone:"16675053452",
		  yzm:""
	  }
  },
  methods:{
	  changebool(){
		  this.isbool=!this.isbool
		  if(this.isbool==false){
			  this.Text1="GO登录"
		  }else{
			  this.Text1="注册"
		  }
	  },
	  //发送验证码
	  async yzm(){
		  if(phone=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/){
			  const res1=await sendAPI({
			  		 phone:this.phoneNum
			  })
			  console.log(res1);
		  }
	  },
	  //提交手机号和验证码注册
	  async register(){
		  const res2=await phoneReginAPI({
		  	phone:this.phone,
		  	verifyCode:this.yzm
		  })
		  console.log(res2);	
		if(res2.code==0){
		  //保存token到localStorage中
		  console.log(res2['x-auth-token']);
		  localStorage.setItem("x-auth-token",res2['x-auth-token']);
		  //跳转
		  this.$router.push('/mine');
	  }
	  }
  }
}
</script>

<style scoped lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
.hello{
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0.8;
	width: 100%;
	height: 100%;
	border:0.0625rem solid gainsboro;
	background: url("../assets/bg.png");
	background-size: cover;
}
.container{
	margin: auto;
	width: 19rem;
	height: 38rem;
	overflow: hidden;
	position: relative;
}
.login-box{
	width: 70%;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: 0.3s ease;
}
.login-title{
	color: rgb(108, 191, 247);
	font-size: 1.6875rem;
	position: relative;
}

.login-box .input-box,.register-box .input-box{
	background-color: #fff;
	border-radius: 0.9375rem;
	overflow: hidden;
	margin-top: 3.125rem;
	opacity: 1;
	visibility: visible;
	transition: 0.6s ease;
}
.login-box input{
	width: 100%;
	height: 1.875rem;
	border: none;
	border-bottom: 0.0625rem solid rgba(0,0,0,0.1);
	font-size: 0.75rem;
	padding: 0.5rem 0;
	text-indent: 0.9375rem;
	outline: none;
}

.login-box input:focus,.register-box input:focus{
	color: rgb(160, 198, 199);
	transition: 0.5s;
}
.login-box input:focus::placeholder,.register-box input:focus::placeholder{
	opacity: 0;
}
.login-box button{
	width: 100%;
	padding: 0.9375rem 2.8125rem;
	margin: 0.9375rem 0;
	background: rgba(0,0,0,0.4);
	border: none;
	border-radius: 0.9375rem;
	color: rgba(255,255,255,0.7);
	font-size: 0.9375rem;
	font-weight: bold;
	cursor: pointer;
	opacity: 1;
}

.login-box button:hover,.register-box button:hover{
	background-color: rgba(0,0,0,0.8);
}
// 注册区域
.register-box input{
	width: 65%;
	height: 1.875rem;
	border: none;
	border-bottom: 0.0625rem solid rgba(0,0,0,0.1);
	font-size: 0.75rem;
	padding: 0.5rem 0;
	text-indent: 0.9375rem;
	outline: none;
}
#yzm-box{
	width: 40%;
	height: 1.875rem;
	border: none;
	border-bottom: 0.0625rem solid rgba(0,0,0,0.1);
	font-size: 0.75rem;
	padding: 0.5rem 0;
	text-indent: 0.9375rem;
	outline: none;
}
#yzm-btn{
	background-color: rgb(161, 213, 248);
	width: 3.125rem;
	height: 1.5rem;
	font-size: 0.6rem !important;
}
.register-title{
	color: rgb(108, 191, 247);
	font-size: 1.6875rem;
}
.register-box button{
	width: 60%;
	padding: 0.9375rem 2.8125rem;
	margin: 0.9375rem 0;
	background: rgba(0,0,0,0.4);
	border: none;
	border-radius: 0.9375rem;
	color: rgba(255,255,255,0.7);
	font-size: 0.9375rem;
	font-weight: bold;
	cursor: pointer;
	opacity: 1;
}
.register-box{
	background-color: #fff;
	z-index: 3;
	width: 180%;
	height: 35rem;
	border-radius: 50%;
	position: absolute;
	top: 20%;
	left: 50%;
	transition: 0.3s ease;
	transform: translateX(-50%);
}
.register-box .center{
	text-align: center !important;
	width: 70%;
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 30%;
	transform: translate(-50%,-50%);
}
.register-title{
	color:  rgb(161, 213, 248);
}
.register-box button{
	background-color: rgb(161, 213, 248);
}
.register-box.slide-up{
	top: 90%;
}
.register-box.slide-up .center{
	top: 0;
	transform: translate(-50%,0%);
}
</style>
